<template>
	<view>
		<u-overlay :show="videoPlay" :opacity="1" @click="onVideoPlay()">
			<view class="warp">
				  <video
					 controls
					 id="myvideo"
					 :src="videoUrl"
					 @fullscreenchange="screenChange"
				  ></video>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		name:"goshop-video",
		props: {
		  videoPlay:{
				type:Boolean,
				default:false
		  },
		  videoUrl:{
			  type:String,
			  default:''
		  }
		},
		watch:{
			text: function (newData, oldData) {
				if(newData){
					this.videoContext = uni.createVideoContext("myvideo", this);    // this这个是实例对象 必传
					console.log(url)
					this.videoUrl = url;
					//this.videoContext.requestFullScreen({ direction: 90 });  
					this.videoContext.requestFullScreen();
					this.videoContext.play();
					this.videoPlay = true;  // 显示播放盒子
				}
		    }
		},
		data() {
			return {
				screenChange(e) {
				  let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏
				  console.log(e, "全屏");
				  if (!fullScreen) {
				    //退出全屏
				    this.onVideoPlay();   // 隐藏播放盒子
				  }
				},
			};
		},
		methods:{
			onVideoPlay(){
				this.$emit("videoPlay", false);
			}
		}
	}
</script>

<style lang="scss">
.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.rect {
	width: 120px;
	height: 120px;
	background-color: #fff;
}
</style>